<template>
    <div class="awesome-swiper">
        <div-row v-if="hardReset" :obj="obj">
            <div class="swiperbox">
                <div class="swiper" :style="{height: obj.height+'px'}">
                    <swiper :options="obj.swiperOptionTop" class="gallery-top" ref="swiperTop">
                        <swiper-slide class="swiper-slider" v-for="(slide, index) in obj.swiperSlides" :key="index" :style="{backgroundImage: `url(${slide})`}"/>
                        <div v-if="obj.ifArrow" class="swiper-button-next swiper-button-white" slot="button-next"/>
                        <div v-if="obj.ifArrow" class="swiper-button-prev swiper-button-white" slot="button-prev"/>
                        <div class="swiper-pagination" slot="pagination"/>
                    </swiper>
                    <swiper :style="{display: obj.ifThumbs? 'block': 'none'}" v-show="obj.ifThumbs" :options="obj.swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                        <swiper-slide v-for="(slide, index) in obj.swiperSlides" :key="index" :style="{backgroundImage: `url(${slide})`}"/>
                    </swiper>
                </div>
            </div>
        </div-row>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name: 'Swiper',
    components: {
        swiper,
        swiperSlide
    },
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            hardReset: true
        }
    },
    watch: {
        'obj': {
            handler(newValue, oldValue) {
                this.hardReset = false
                this.$nextTick(() => {
                    this.hardReset = true
                })
            },
            deep: true
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.hardReset = true
            if (this.hardReset) {
                const swiperTop = this.$refs.swiperTop.swiper
                const swiperThumbs = this.$refs.swiperThumbs.swiper
                swiperTop.controller.control = swiperThumbs
                swiperThumbs.controller.control = swiperTop
            }
        })
    },
    methods: {

    }
}
</script>
